<template>
  <div class="PropertiesView">
    <Header />
    <!-- //header -->
    <!-- breadcrumbs -->
    <div class="w3ls-inner-banner">
      <div class="container">
        <h2>Properties</h2>
        <label></label>
        <div class="clearfix"></div>
      </div>
    </div>
    <!-- //breadcrumbs -->

    <!-- main-content -->
    <div class="main-content">
      <!-- gallery -->
      <div class="gallery" id="gallery">
        <div class="container">
          <div class="gallery_gds">
            <ul class="simplefilter ">
              <li class="active" data-filter="all">All</li>
              <li data-filter="1">Commercial</li>
              <li data-filter="2">Residential</li>
              <li data-filter="3">Luxury</li>
            </ul>
            <div class="filtr-container " style="padding: 0px; position: relative; height: 858px;">
              <div class="col-md-4 col-ms-6 jm-item first filtr-item" data-category="1, 5" data-sort="Busy streets" style="opacity: 1; transform: scale(1) translate3d(0px, 0px, 0px); backface-visibility: hidden; perspective: 1000px; transform-style: preserve-3d; position: absolute; transition: all 0.5s ease-out 0ms;">
                <div class="jm-item-wrapper">
                  <div class="jm-item-image">
                    <img src="images/g1.jpg" alt="property" />
                    <span class="jm-item-overlay"> </span>
                    <div class="jm-item-button"><a href="property-details.html">View Details</a></div>
                  </div>
                  <div class="jm-item-title">$250</div>
                  <a class="agile-its-property-title" href="property-details.html">Property 1</a>
                  <p class="w3ls-p-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </div>
              </div>
              <div class="col-md-4 col-ms-6 jm-item first filtr-item" data-category="2, 5" data-sort="Luminous night" style="opacity: 1; transform: scale(1) translate3d(380px, 0px, 0px); backface-visibility: hidden; perspective: 1000px; transform-style: preserve-3d; position: absolute; transition: all 0.5s ease-out 0ms;">
                <div class="jm-item-wrapper">
                  <div class="jm-item-image">
                    <img src="images/g2.jpg" alt="property" />
                    <span class="jm-item-overlay"> </span>
                    <div class="jm-item-button"><a href="property-details.html">View Details</a></div>
                  </div>
                  <div class="jm-item-title">$380</div>
                  <a class="agile-its-property-title" href="property-details.html">Property 2</a>
                  <p class="w3ls-p-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </div>
              </div>
              <div class="col-md-4 col-ms-6 jm-item first filtr-item" data-category="1, 4" data-sort="City wonders" style="opacity: 1; transform: scale(1) translate3d(760px, 0px, 0px); backface-visibility: hidden; perspective: 1000px; transform-style: preserve-3d; position: absolute; transition: all 0.5s ease-out 0ms;">
                <div class="jm-item-wrapper">
                  <div class="jm-item-image">
                    <img src="images/g3.jpg" alt="property" />
                    <span class="jm-item-overlay"> </span>
                    <div class="jm-item-button"><a href="property-details.html">View Details</a></div>
                  </div>
                  <div class="jm-item-title">$410</div>
                  <a class="agile-its-property-title" href="property-details.html">Property 3</a>
                  <p class="w3ls-p-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </div>
              </div>
              <div class="col-md-4 col-ms-6 jm-item first filtr-item" data-category="1, 3" data-sort="In production" style="opacity: 1; transform: scale(1) translate3d(0px, 286px, 0px); backface-visibility: hidden; perspective: 1000px; transform-style: preserve-3d; position: absolute; transition: all 0.5s ease-out 0ms;">
                <div class="jm-item-wrapper">
                  <div class="jm-item-image">
                    <img src="images/g4.jpg" alt="property" />
                    <span class="jm-item-overlay"> </span>
                    <div class="jm-item-button"><a href="property-details.html">View Details</a></div>
                  </div>
                  <div class="jm-item-title">$580</div>
                  <a class="agile-its-property-title" href="property-details.html">Property 4</a>
                  <p class="w3ls-p-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </div>
              </div>
              <div class="col-md-4 col-ms-6 jm-item first filtr-item" data-category="3, 4" data-sort="Industrial site" style="opacity: 1; transform: scale(1) translate3d(380px, 286px, 0px); backface-visibility: hidden; perspective: 1000px; transform-style: preserve-3d; position: absolute; transition: all 0.5s ease-out 0ms;">
                <div class="jm-item-wrapper">
                  <div class="jm-item-image">
                    <img src="images/g5.jpg" alt="property" />
                    <span class="jm-item-overlay"> </span>
                    <div class="jm-item-button"><a href="property-details.html">View Details</a></div>
                  </div>
                  <div class="jm-item-title">$310</div>
                  <a class="agile-its-property-title" href="property-details.html">Property 5</a>
                  <p class="w3ls-p-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </div>
              </div>
              <div class="col-md-4 col-ms-6 jm-item first filtr-item" data-category="2, 4" data-sort="Peaceful lake" style="opacity: 1; transform: scale(1) translate3d(760px, 286px, 0px); backface-visibility: hidden; perspective: 1000px; transform-style: preserve-3d; position: absolute; transition: all 0.5s ease-out 0ms;">
                <div class="jm-item-wrapper">
                  <div class="jm-item-image">
                    <img src="images/g6.jpg" alt="property" />
                    <span class="jm-item-overlay"> </span>
                    <div class="jm-item-button"><a href="property-details.html">View Details</a></div>
                  </div>
                  <div class="jm-item-title">$810</div>
                  <a class="agile-its-property-title" href="property-details.html">Property 6</a>
                  <p class="w3ls-p-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </div>
              </div>
              <div class="col-md-4 col-ms-6 jm-item first filtr-item" data-category="1, 3" data-sort="City lights" style="opacity: 1; transform: scale(1) translate3d(0px, 572px, 0px); backface-visibility: hidden; perspective: 1000px; transform-style: preserve-3d; position: absolute; transition: all 0.5s ease-out 0ms;">
                <div class="jm-item-wrapper">
                  <div class="jm-item-image">
                    <img src="images/g7.jpg" alt="property" />
                    <span class="jm-item-overlay"> </span>
                    <div class="jm-item-button"><a href="property-details.html">View Details</a></div>
                  </div>
                  <div class="jm-item-title">$599</div>
                  <a class="agile-its-property-title" href="property-details.html">Property 7</a>
                  <p class="w3ls-p-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </div>
              </div>
              <div class="col-md-4 col-ms-6 jm-item first filtr-item" data-category="2, 4" data-sort="Dreamhouse" style="opacity: 1; transform: scale(1) translate3d(380px, 572px, 0px); backface-visibility: hidden; perspective: 1000px; transform-style: preserve-3d; position: absolute; transition: all 0.5s ease-out 0ms;">
                <div class="jm-item-wrapper">
                  <div class="jm-item-image">
                    <img src="images/g8.jpg" alt="property" />
                    <span class="jm-item-overlay"> </span>
                    <div class="jm-item-button"><a href="property-details.html">View Details</a></div>
                  </div>
                  <div class="jm-item-title">$699</div>
                  <a class="agile-its-property-title" href="property-details.html">Property 8</a>
                  <p class="w3ls-p-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </div>
              </div>
              <div class="col-md-4 col-ms-6 jm-item first filtr-item" data-category="1, 3, 4" data-sort="Dreamhouse" style="opacity: 1; transform: scale(1) translate3d(760px, 572px, 0px); backface-visibility: hidden; perspective: 1000px; transform-style: preserve-3d; position: absolute; transition: all 0.5s ease-out 0ms;">
                <div class="jm-item-wrapper">
                  <div class="jm-item-image">
                    <img src="images/g3.jpg" alt="property" />
                    <span class="jm-item-overlay"> </span>
                    <div class="jm-item-button"><a href="property-details.html">View Details</a></div>
                  </div>
                  <div class="jm-item-title">$699</div>
                  <a class="agile-its-property-title" href="property-details.html">Property 9</a>
                  <p class="w3ls-p-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </div>
              </div>
              <div class="clearfix"> </div>
            </div>
          </div>
        </div>
      </div>
      <!--//gallery-->
    </div>
    <!-- //main-content -->
    <!-- footer -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/header.vue";
import Footer from "@/components/footer.vue";

export default {
  name: "PropertiesView",

  components: {Header,Footer},

  setup() {

  }
}
</script>

<style scoped>
  @import "../assets/css/bootstrap.min.css";
  @import "../assets/css/style.css";
  @import "../assets/css/font-awesome.min.css";

  @import "http://fonts.googleapis.com/css?family=Roboto+Condensed";
  @import "http://fonts.googleapis.com/css?family=Open+Sans";
</style>